<template>
	<view>
		<view class="header">
			<view class="header-top">
				<text>{{ currentFundInfo.sevenDaysYearIncome}}%</text>
				<text>七日年化收益率(%)</text>
			</view>
			<view class="header-left">
				<text>{{currentFundInfo.millionCopiesIncome}}</text>
				<text>万份收益({{currentDate}})</text>
			</view>
			<view class="header-right">
				<text>{{currentFundInfo.buyMin}}</text>
				<text>起购价格</text>
			</view>
		</view>
		<view class="main">
			<view class="main-title">
				<text>七日年化收益曲线</text>
			</view>
			<view class="charts-out">
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartData" background="none" :opts="{
							dataLabel:false,
						}" />
				</view>
				<view class="charts-data">
					<text v-for="item in chartsBtn" :key="item.id" :class="item.id == chartsBtnId ? 'active' : ''"
						@tap="changeChartsBtnId(item.id)">{{item.name}}</text>
				</view>
			</view>

		</view>
		<!-- 基金切换 -->
		<view class="tabBar">
			<text v-for="item in tabBar" :key="item.id" :class="item.id == activeId ? 'active' : ''"
				@tap="changeId(item.id)">{{item.name}}</text>
		</view>

		<swiper @change="swiperChange" :current="activeId">
			<swiper-item>
				<scroll-view :scroll-y="true">
					<view class="title">
						<text>基本信息</text>
					</view>
					<view class="row">
						<text>基金全称</text>
						<text>{{currentFundInfo.name}}</text>
					</view>
					<view class="row">
						<text>基金代码</text>
						<text>{{currentFundInfo.code}}</text>
					</view>
					<view class="row">
						<text>基金类型</text>
						<text>{{currentFundInfo.type}}</text>
					</view>
					<view class="row">
						<text>基金状态</text>
						<text>开放交易</text>
					</view>
					<view class="row">
						<text>成立日期</text>
						<text>{{currentFundInfo.dateOfEstablishment}}</text>
					</view>
					<view class="row">
						<text>基金经理</text>
						<text>{{currentFundInfo.manager}}</text>
					</view>
					<view class="row">
						<text>基金公司</text>
						<text>{{currentFundInfo.company}}</text>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view :scroll-y="true">
					<image src="../../static/currentZHY/rule1.png" mode="widthFix"></image>
					<image src="../../static/currentZHY/rule2.png" mode="widthFix"></image>
					<image src="../../static/currentZHY/rule3.png" mode="widthFix"></image>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view :scroll-y="true">
					<button class="fundBtn">什么是基金?</button>
					<text class="fundRes">
						基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益、共担风险
					</text>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="tip">
			<text>基金销售服务由成都宇宁基金销售有限公司提供</text>
			<text>投资前请详细阅读基金合同，招募说明书。基金的过往业绩不预示其未来表现,市场有风险,投资需谨慎</text>
		</view>

		<button class="buyBtn" @tap="toBuy">立刻购买</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeId: 0,
				tabBar: [{
						id: 0,
						name: '基金档案'
					},
					{
						id: 1,
						name: '交易规则'
					},
					{
						id: 2,
						name: '常见问题'
					}
				],
				currentFundInfo: {},
				lineData: [],
				chartsBtnId: 0,
				chartsBtn: [{
						id: 0,
						name: '近一月'
					},
					{
						id: 1,
						name: '近三月'
					},
					{
						id: 2,
						name: '近半年'
					},
					{
						id: 3,
						name: '近一年'
					},
				],
				chartData: {
					categories: [],
					series: [],
				}
			}
		},
		computed: {
			// 数据里没有收益日期,自己获取当前时间
			currentDate() {
				const date = new Date();
				const mouth = date.getMonth() + 1;
				const day = date.getDate()
				return mouth + '-' + day
			}
		},
		methods: {
			async getCurrentById(id) {
				const res = await this.$http.current.getCurrentById({
					id
				});
				if (res.code == 200) {
					this.currentFundInfo = res.data.currentFundInfo;
					this.lineData = res.data.lineData;
					uni.setNavigationBarTitle({
						title: res.data.currentFundInfo.name
					});
					// console.log(this.lineData);
					console.log(this.currentFundInfo);
					// 筛选折线图开始日期 中间日期 结束日期
					this.chartData.categories = this.lineData[0].categories.map((item, index) => {
						if (index == 3) {
							return item;
						} else if (index == Math.ceil((this.lineData[0].categories.length - 1) / 2)) {
							return item
						} else if (index == this.lineData[0].categories.length - 4) {
							return item
						} else {
							return ''
						}
					});
					this.chartData.series = this.lineData[0].series;
				}
			},
			//切换 基金档案 交易规则的
			changeId(id) {
				this.activeId = id;
			},
			// 切换折线图显示
			changeChartsBtnId(id) {
				this.chartsBtnId = id;
				// 筛选折线图开始日期 中间日期 结束日期
				this.chartData.categories = this.lineData[id].categories.map((item, index) => {
					if (index == 3) {
						return item;
					} else if (index == Math.ceil((this.lineData[id].categories.length - 1) / 2)) {
						return item
					} else if (index == this.lineData[id].categories.length - 4) {
						return item
					} else {
						return ''
					}
				});
				this.chartData.series = this.lineData[id].series;
			},
			swiperChange(event) {
				this.activeId = event.detail.current
			},
			toBuy(){
				const that = this;
				uni.navigateTo({
				  url: '/pages/current_buy/current_buy',
				  success: function(res) {
				    // 通过eventChannel向被打开页面传送数据
				    res.eventChannel.emit('acceptDataFromOpenerPage', that.currentFundInfo)
				  }
				})
			}
		},
		onLoad(options) {
			console.log(options);
			this.getCurrentById(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 320rpx;
		background-image: url(../../static/currentZHY/detailbg.png);
		background-repeat: no-repeat;
		background-size: cover;
		color: #FFFFFF;
		padding-top: 36rpx;
		text-align: center;

		view {
			width: 300rpx;
			text-align: center;

			text {
				display: block;
			}

			text:first-child {
				font-size: 54rpx;
				font-weight: bold;
			}

			text:last-child {
				margin-top: 12rpx;
				font-size: 26rpx;
				font-weight: 100;
			}
		}

		.header-top {
			margin: 0 auto;
			margin-bottom: 24rpx;
		}

		.header-left {
			display: inline-block;

			text:first-child {
				font-size: 42rpx;
			}
		}

		.header-right {
			text:first-child {
				font-size: 42rpx;
			}

			display: inline-block;
		}
	}

	.main {
		// height: 500rpx;
		background-color: #FFFFFF;
		position: relative;
		top: -40rpx;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		padding: 0 24rpx;
		padding-top: 42rpx;
		z-index: 1;
	}

	.main-title::before {
		content: '';
		display: inline-block;
		position: relative;
		top: 6rpx;
		width: 8rpx;
		border-radius: 24rpx;
		height: 34rpx;
		background-color: #007AFF;
	}

	.main-title::after {
		content: '';
		display: inline-block;
		position: relative;
		top: 3rpx;
		float: right;
		width: 20rpx;
		height: 30rpx;
		background-image: url(../../static/currentZHY/arrow-r.png);
		background-size: 20rpx 30rpx;
	}

	.main-title {
		text {
			font-weight: bold;
			margin-left: 18rpx;
		}
	}

	// 折线图
	.charts-out {
		box-shadow: 0px 0px 8px #efefef;
		padding-bottom: 36rpx;
		padding-top: 12rpx;
		margin-top: 12rpx;
		border-radius: 12rpx;
	}

	.charts-box {
		margin-top: 24rpx;
		width: 100%;
		height: 300px;
	}

	.charts-data {
		display: flex;
		justify-content: center;

		text {
			display: inline-block;
			padding: 12rpx 28rpx;
			border: 1px solid #C8C7CC;
			color: #C0C0C0;
			font-size: 28rpx;
		}

		.active {
			background-color: #007AFF;
			color: #FFFFFF;
			border: none;
		}

		text:nth-child(n+2) {
			margin-left: -2rpx;
		}
	}

	// tabBar标签栏切换
	.tabBar {
		padding: 24rpx;

		text {
			font-size: 32rpx;
			color: #C0C0C0;

			&:nth-child(n+2) {
				margin-left: 42rpx;
			}
		}

		.active {
			transition: color .3s;
			font-size: 38rpx;
			color: #007AFF;
			font-weight: bold;
			position: relative;
		}

		.active::after {
			display: block;
			content: '';
			position: absolute;
			bottom: -28rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 12rpx;
			width: 52rpx;
			height: 8rpx;
			background-color: #007AFF;
		}
	}

	swiper {
		margin: 24rpx;
		padding: 24rpx;
		height: 700rpx;
		box-shadow: 0px 0px 8px #efefef;
	}

	scroll-view {
		height: 720rpx;
	}

	swiper-item .title {
		color: #999999;
		padding-left: 12rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	swiper-item .row {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F1F1F1;

		text {
			font-size: 28rpx;

			&:first-child {
				color: #999999;
				padding-left: 12rpx;
				padding-right: 24rpx;
			}
		}
	}

	// 常见问题
	.fundBtn {
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.fundRes {
		display: block;
		text-align: justify;
		margin-top: 18rpx;
		line-height: 60rpx;
		padding: 24rpx;
		border: 2rpx solid #F1F1F1;
		border-radius: 24rpx;
	}

	// 风险提示
	.tip {
		padding: 0 36rpx;
		padding-bottom: 36rpx;
		text {
			display: block;
			color: #999999;

			&:first-child {
				font-size: 28rpx;
				font-weight: bold;
			}

			&:last-child {
				margin-top: 6rpx;
				font-size: 24rpx;
			}
		}
	}

	// 购买按钮
	.buyBtn {
		margin-top: 24rpx;
		font-size: 32rpx;
		background-color: #007AFF;
		color: #FFFFFF;
	}
</style>
